<template>
  <div class="icons">
    <swiper :options="swiperOption_icons"  v-if="showiconSwiper">
      <swiper-slide v-for="(page,index) of pages" :key="index">
        <div class="icon_" v-for="item of page" :key="item.id">
          <div class="icon_img">
            <img class="icon_img_content" :src="item.imgUrl"/>
          </div>
          <p class="icon_des">{{item.desc}}</p>
        </div>
      </swiper-slide>
      <div class="swiper-pagination-icon"  slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
export default {
  name: 'Homeicons',
  props:{
    ilist:Array
  },
  data () {
    return{
      swiperOption_icons: {
        pagination: '.swiper-pagination-icon',
        loop: true,
        autoplay: false

      }
    }
  },
  computed: {
    pages () {
      const pages = []
      this.ilist.forEach((item,index) => {
        const page = Math.floor(index/8)
        if (!pages[page]) {
          pages[page] = []
        }
        pages[page].push(item)
      })
      return pages
    },
    showiconSwiper () {
      return this.ilist.length
    }
  }
}
</script>

<style lang="stylus" scoped>
  .icons>>>.swiper-pagination-bullet-active
    background #00bcd4 !important
  .icons >>> .swiper-container
    height 0
    width 100%
    padding-bottom 25.36%
  .swiper-pagination-icon
    position relative
    margin-top 1.85rem
    text-align center
  .icon_
    position relative
    overflow hidden
    height 0
    width 25%
    float left
    padding-bottom 10.7%
    .icon_img
      position absolute
      top .1rem
      left 0
      right 0
      bottom .25rem
      box-sizing border-box
      padding .1rem
      .icon_img_content
        display block
        margin 0 auto
        height .3rem
    .icon_des
      position absolute
      left 0
      right 0
      bottom 0
      margin-top .1rem
      margin-bottom  0
      text-align center
      display block
      color #333
      overflow hidden
      white-space nowrap
      text-overflow ellipsis

</style>
